import React, {useImperativeHandle, useState} from 'react'
import PropTypes from 'prop-types'
import {Button, Col, Form, Input, Row, Select} from "antd";
import './style.less'
import {FormDataType, FormTypes} from "../DataType";
import SelectItems from "../InputItem/SelectItems";

/**
 * ListPage搜索组件
 * @param props
 * @constructor
 */
function SearchForm(props: FormTypes) {
    const [form] = Form.useForm();
    const [hiddenStatus, setHiddenStatus] = useState(false);                        //高级搜索显示/隐藏状态
    const [formItems, setFormItems] = useState<Array<FormDataType>>([]);            //表单配置数据
    const [hiddenItems, setHiddenItems] = useState<Array<FormDataType>>([]);        //高级搜索配置数据
    const {isFormBtn, submitFn, formConfig, cRef} = props

    React.useEffect(() => {
        SetFormItem(props.formData)
    }, [props.formData])


    useImperativeHandle(cRef, () => ({
        form: form,
    }))

    /**
     * 生成Form表单
     * @param formData
     */
    const CreateFormItem = (formData: Array<FormDataType>) => {
        const list = formData || []
        const formItem = list.map((item, index) => {
            switch (item.ColItemType) {
                case "DatePicker":
                    break;
                case "Input":
                    return (
                        <Col span={6}>
                            <Form.Item  {...item.Config}>
                                <Input {...item.InputConfig}/>
                            </Form.Item>
                        </Col>
                    )
                case "Select":

                    return (
                        <Col span={6}>
                            <Form.Item {...item.Config}>
                                <SelectItems InputConfig={item.InputConfig} InputValueConfig={item.InputValueConfig}/>
                            </Form.Item>
                        </Col>
                    )
                case "TextArea":
                    break;
            }
        })
        return formItem
    }

    /**
     * 多于3个FormItem自动隐藏
     * @constructor
     */
    const SetFormItem = (formData: Array<FormDataType>) => {
        let items: Array<FormDataType> = [],
            hiddenItems: Array<FormDataType> = []
        formData.forEach((item, index) => {
            index > 2 ? hiddenItems.push(item) : items.push(item)
        })
        setHiddenItems(hiddenItems)
        setFormItems(items)
    }

    /**
     * 查询事件
     * @param form
     */
    const onOk = (form: any) => {
        submitFn && submitFn(form)
    }

    /**
     * 重置
     */
    const reSetValue = () => {
        form.resetFields();
    }

    return (<div className={'SearchForm'}>
        <Form
            form={form}
            layout={'inline'}
            onFinish={onOk}
            {...formConfig}
        >
            <Row>
                {CreateFormItem(formItems)}
                {isFormBtn && <Col span={6}>
                    <div className="search-btn">
                        {hiddenItems.length > 0 && <a href={'javascript:;'} onClick={() => {
                            setHiddenStatus(!hiddenStatus)
                        }}>高级查询</a>}
                        <Button type={'primary'} htmlType={'submit'}>查询</Button>
                        <Button onClick={reSetValue}>重置</Button>
                    </div>
                </Col>}
            </Row>
            {hiddenStatus && <Row>
                {
                    CreateFormItem(hiddenItems)
                }
            </Row>}
        </Form>
    </div>)
}

export default SearchForm